<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试用例</title>
</head>
<body>
<span class="content">Hello World!!</span>
<span class="line">|</span>

<div class="vue_content">
    <span v-text="Content"></span>
    <span class="line" v-text="Line"></span>
</div>

</body>
<script type="text/javascript" src="semantic/js/jquery.min.js"></script>
<script type="text/javascript" src="semantic/js/vue.js"></script>
<script type="text/javascript">
	/**
     * vue js实现滚动
     */
    var vm = new Vue({
        el: '.vue_content',
        data:{
            Content: 'Hello Vue!!!',
            Line: '|',
            Left:'',
            Right:'',
            Flag:'',
            trans:'Hello Vue!!!',
            Count:0
        },
        methods:{
            Roll_Left:function(){
                for(var i = 0; i < this.Content.length-1; i++){
                    this.Flag += this.Content[i+1];
                }
                this.Content = this.Flag;
                this.Flag='';
                if(this.Content == ""){
                    this.Left = window.clearInterval(this.Left);
                    this.trans = this.trans.split('').reverse().join('');
                    this.Right = self.setInterval("vm.Roll_Right()", 500);
                }
            },
            Roll_Right:function(){
                this.Content = this.trans[this.Count]+this.Content;
                this.Count++;
                if(this.Count == this.trans.length){
                    this.Count = 0;
                    this.Right = window.clearInterval(this.Right);
                    this.trans = this.trans.split('').reverse().join('');
                    this.Left = self.setInterval("vm.Roll_Left()", 200);
                }
            }
        }
    });

    vm.Left = self.setInterval("vm.Roll_Left()", 100);

    /**
	 * 淡入淡出效果
	 * @param  {[type]} selector [description]
	 * @return {[type]}          [description]
	 */
    function blink(selector){
    	$(selector).fadeOut('slow',function(){
    		$(this).fadeIn('slow',function(){
    			blink(this);
    		})
    	})
    }

    /**
     * 改变透明度淡入淡出
     */
    
    function blink(selector){
    	$(selector).fadeTo("slow",0.5,function(){
    		$(this).fadeToggle("slow",function(){
    			blink(this);
    		});
    	});
    }


	window.content = $('.content').text();
    window.flag ="";
    window.countLeft = 0;
    window.countRight = $('.content').text().length-1;
    window.left;
    window.right;

    /**
     * 左滚
     */

    function RollLeft(){
    	flag = "";
    	var trans = $('.content').text();
    	for(var i = 0; i < trans.length-1; i++){
    		flag += trans[i+1];
    	}
    	$('.content').text(flag);
    	flag = "";
    	countLeft ++;
    	if(countLeft == content.length){
    		countLeft = 0;
    		left = window.clearInterval(left)
    		right = self.setInterval("RollRight()", 200);
    	}
    }


    // function RollRight(){
    // 	window.flag += content[countRight];
    // 	$('.content').text(flag);
    // 	window.countRight ++;
    // 	if(countRight == content.length){
    // 		countRight = 0;
    // 		right = window.clearInterval(right)
    // 		left = self.setInterval("RollLeft()", 500);
    // 	}
    // }
    
    /**
     * 右滚
     */

    function RollRight(){
    	$('.content').prepend(content[countRight]);
    	countRight--;
    	if(countRight < 0){
    		countRight = $('.content').text().length-1;
    		right = window.clearInterval(right)
     		left = self.setInterval("RollLeft()", 200);
    	}
    }

	$(document).ready(function(){
		blink('.line');
		left = self.setInterval("RollLeft()", 200);
	});
</script>
</html>